import React, { useState } from 'react';
import { Tabbar } from 'react-vant'
import { Like, Chat, AppsO, Manager } from '@react-vant/icons'
import './index.less'

export default function IndexPage(props) {
  const [name, setname] = useState('home');
  const handelchange = (e) => {
    switch (e) {
      case 'message':
        props.history.push('/app/message');
        break;
      case 'concern':
        props.history.push('/app/concern');
        break;
      case 'magpie':
        props.history.push('/app/magpie');
        break;
      case 'my':
        props.history.push('/app/my');
        break;
    }
  };
  return (
    <div>
      {props.children}
      <div className='demo-tabbar'>
        <Tabbar
          value={name}
          onChange={(e) => handelchange(e)}
        >
          <Tabbar.Item name="message" icon={<Chat />}>消息</Tabbar.Item>
          <Tabbar.Item name="concern" icon={<AppsO />}>关注</Tabbar.Item>
          <Tabbar.Item name="magpie" icon={<Like />}>鹊桥</Tabbar.Item>
          <Tabbar.Item name="my" icon={<Manager />}>我的</Tabbar.Item>
        </Tabbar>
      </div>
    </div>
  );
}
